<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="xbsj-labels" content="Earth示例"></meta>
    <title>自定义贴地矩形-文字</title>
    <!-- 0 引入js文件 -->
    <script src="../../XbsjEarth/XbsjEarth.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #canvas-container {
            width: 600px;
            height: 600px;
            position: absolute;
            right: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div id="earthContainer" style="width: 100%; height: 100%; background: grey">
    </div>
    <script>
        var earth;
        var bgImagery;

        function startup() {
            earth = new XE.Earth('earthContainer');

            earth.sceneTree.root = {
                "children": [
                    {
                        "czmObject": {
                            "name": "谷歌影像",
                            "xbsjType": "Imagery",
                            "xbsjImageryProvider": {
                                "XbsjImageryProvider": {
                                    "url": "//www.google.cn/maps/vt?lyrs=s,h&gl=CN&x={x}&y={y}&z={z}",
                                    "srcCoordType": "GCJ02",
                                    "dstCoordType": "WGS84",
                                    "maximumLevel": 21,
                                },
                            }
                        },
                    }, {
                        "czmObject": {
                            "xbsjType": "Terrain",
                            "name": "中国14级（测试）",
                            "xbsjTerrainProvider": {
                                "type": "XbsjCesiumTerrainProvider",
                                "XbsjCesiumTerrainProvider": {
                                    "url": "//lab.earthsdk.com/terrain/577fd5b0ac1f11e99dbd8fd044883638",
                                    "requestVertexNormals": true,
                                    "requestWaterMask": true
                                }
                            }
                        }
                    }
                ]
            };

            var p = createGroundCircle(earth);
            p.text = '香山红叶'

            p.flyTo();

            window.p = p; // 方便调试
        }

        // 1 XE.ready()会加载Cesium.js等其他资源，注意ready()返回一个Promise对象。
        XE.ready().then(startup);

        function createGroundCircle(earth) {
            const evalString = `
                function measureText(text, font) {
                    if (!window._measureTextctx) {
                        const canvas = document.createElement('canvas');
                        window._measureTextctx = window._measureTextctx || canvas.getContext('2d');     
                    }
                    const ctx = window._measureTextctx;

                    ctx.font = font;
                    const textMetrics = ctx.measureText(p.text); // TextMetrics object
                    const w = textMetrics.width;
                    const h = textMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxDescent;
                    return [w, h];
                }

                if (!p.text) {
                    XE.MVVM.extend(p, {
                        text: '',
                    });
                }

                const drawText = () => {
                    if (p.text) {
                        const font = '48px serif'
                        let [w, h] = measureText(p.text, font);
                        h += 10; // 上下扩展10个像素，避免中文字符被遮挡

                        p.width = p.height * w / h;
                        p.canvasWidth = w;
                        p.canvasHeight = h;

                        // canvasWidth会驱动canvas发生变化，这里需要延后绘制，否则绘制好以后的canvas会被清空
                        setTimeout(() => {
                            p.drawCanvas(ctx => {
                                ctx.font = "48px serif";
                                ctx.fillStyle = "rgba(255, 255, 255, 0.5)";
                                ctx.fillText(p.text, 0, p.canvasHeight - 5);
                            });
                        }, 0);
                    }
                }

                drawText();
                p.disposers.push(XE.MVVM.watch(() => p.text, drawText));
            `;

            const config = {
                position: [2.02729390339372, 0.6980810742548738, 755.036813823199],
                width: 3000,
                height: 3000,
                evalString,
            }

            var p = new XE.Obj.CustomGroundRectangle(earth)
            p.xbsjFromJSON(config);

            return p;
        }        
    </script>
</body>

</html>